<template>
  <div class="wrap" :style="{ height: pHeight }">
    <div class="top">
      分析和评估中国核医学和医用核技术的现有状况和未来发展引导核医学和医用核技术的快速、健康和有序的发展
    </div>
    <div class="content">
      <div class="title">请选择你要做的调查问卷：</div>
      <div class="answers" v-if="this.questionInfo.length > 0">
        <div
          class="item"
          :class="{ active: item.examId == active }"
          v-for="(item, index) in questionInfo"
          :key="index"
          @click="handleSelect(item)"
        >
          <div class="item-left ">
            {{ item.examName }}
          </div>
          <div class="item-right" v-show="item.examId == active">
            <div class="todo">√</div>
          </div>
        </div>
      </div>
      <div class="s-button" v-if="this.questionInfo.length > 0">
        <mt-button class="q-btn" type="primary" @click="gotoAnswer">
          开始答题
        </mt-button>
      </div>
      <div class="noselset" v-if="this.questionInfo.length == 0">
        <img
          :src="require('@/assets/img/noselect.png')"
          style="width:100%;margin-top:30px;"
        />
        <div
          style="color:#798EAE;font-size:1.4rem;margin-top:30px;text-align:center"
        >
          暂无新的调查问卷
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Select", // 选择问卷
  components: {},
  data() {
    return {
      account: "",
      password: "",
      pHeight: "100%",
      active: "",
      curSelect: {},
      questionInfo: [],
    };
  },
  created() {
    let userInfo = this.$store.state.userInfo;
    if (!userInfo) {
      this.$router.push("./");
    }
    this.$axios
      .get("/web/getList?userId=" + userInfo.userId + "&post=" + userInfo.post)
      .then((res) => {
        if (res.code == 200) {
          this.questionInfo = res.list;
        } else {
          this.questionInfo = [];
        }
      });

    // this.questionInfo = [
    //   {
    //     params: {},
    //     examId: 5,
    //     examName: "测试题目六",
    //     startTime: "2021-08-24",
    //     endTime: "2021-10-14",
    //     list: [
    //       {
    //         params: {},
    //         questionId: 1,
    //       },
    //       {
    //         params: {},
    //         questionId: 2,
    //       },
    //       {
    //         params: {},
    //         questionId: 3,
    //       },
    //       {
    //         params: {},
    //         questionId: 4,
    //       },
    //     ],
    //     count: 4,
    //     recordId: 292,
    //     questionList: [1, 2, 3],
    //     answerList: ["42-43", "48"],
    //   },
    //   {
    //     params: {},
    //     examId: 7,
    //     examName: "测试题目三",
    //     startTime: "2021-09-01",
    //     endTime: "2021-10-20",
    //     list: [
    //       {
    //         params: {},
    //         questionId: 1,
    //       },
    //       {
    //         params: {},
    //         questionId: 2,
    //       },
    //       {
    //         params: {},
    //         questionId: 3,
    //       },
    //       {
    //         params: {},
    //         questionId: 4,
    //       },
    //     ],
    //     count: 4,
    //   },
    // ];
  },
  mounted() {
    this.$nextTick(() => {
      let pageInfo = this.getWindowConfig();
      this.pHeight = pageInfo.windowHeight + "px";
    });
  },
  methods: {
    getWindowConfig() {
      let windowWidth = window.innerWidth;
      let windowHeight = window.innerHeight;
      if (typeof windowWidth !== "number") {
        if (document.compatMode === "CSS1Compat") {
          windowWidth = document.documentElement.clientWidth;
          windowHeight = document.documentElement.clientHeight;
        } else {
          windowWidth = document.body.clientWidth;
          windowHeight = window.body.clientHeight;
        }
      }
      return {
        windowWidth: windowWidth,
        windowHeight: windowHeight,
      };
    },
    handleSelect(item) {
      this.active = item.examId;
      this.curSelect = item;
    },
    gotoAnswer() {
      this.$store.commit("set_current_answer", this.curSelect);
      this.$router.push("./question");
    },
  },
};
</script>
<style scoped lang="scss">
@import "~@/assets/style/base.scss";
.wrap {
  width: 100vw;
  height: 100vh;
  background: url("~@/assets/img/bg2.png") no-repeat;
  background-size: 100% 100%;
  padding-top:1%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
  position:relative;
}
.top{
  position:fixed;
  top:0;
  left:0;
  color:#fff;
  background:$f-font-color3;
  padding:1rem 1.2rem;
  line-height:20px;
  font-size:14px;

}

.content {
  width: 90%;
  height: 70%;
  background: $f-bg-color;
  border-radius: 10px;
  padding: 20px 10px 0;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
  position: relative;
  .title {
    font-size: 1.2rem;
  }
  .answers {
    margin-top: 10px;
    padding: 0 5px;
    height: 80%;
    overflow-y: scroll;
    .item {
      border: 1px solid $f-font-color2;
      border-radius: 5px;
      box-sizing: border-box;
      padding: 3% 2%;
      color: #a1abbd;
      margin-top: 6%;
      display: flex;
      justify-content: space-between;
      &.active {
        color: $f-main-color;
        border: 1px solid $f-main-color;
      }
      .item-left {
        width: 90%;
        display: flex;
        align-items: center;
        font-size: 1rem;
        line-height: 1.5;
      }
      .item-right {
        width: 10%;
        text-align: center;
        color: $f-font-color3;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .icon {
          font-size: 1.5rem;
        }
        .finish {
          background: $f-type-sfccess;
          font-size: 0.7rem;
          color: $f-font-color5;
          border-radius: 2px;
          padding: 2px;
        }
        .todo {
          color: $f-font-color3;
          font-size: 1.4rem;
        }
      }
    }
  }
  .s-button {
    position: absolute;
    bottom: 1px;
    left: 4%;
    height: 12%;
    width: 92%;
    box-sizing: border-box;
    padding: 2% 0;
    background: #fff;

    display: flex;
    .q-btn {
      flex: 1;
    }
  }
}
</style>
